<template>
  <div class="order-index-container">
    <header>订单</header>
    <Tabs v-model="tabIndex" :sticky="true" @change="onChange">
      <Tab :title="tabTitle.normal">
        <PullRefresh v-model="loading" @refresh="onRefresh">
          <List
            :finished="none"
            finished-text="-- 已经到底了 --"
            v-model="loading"
            @load="loadMore"
            class="list"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <Panel
              v-for="item in orderList"
              :key="item.No"
              class="item"
            >
              <div slot="header" class="item-header">
                <img :src="item.StoreIcon" alt="">
                <p class="shop-name" @click="goStore(item.StoreId)">{{item.StoreName}} ></p>
                <p class="status">{{converStatus(item.Status)}}</p>
              </div>
              <div class="item-content" @click="goOrderDetail(item.No)">
                <p class="name">{{item.Goods}}</p>
                <p class="price">¥{{item.Amount}}</p>
              </div>
              <div slot="footer" class="item-footer">
                <p>{{item.Shipment}}</p>
              </div>
            </Panel>
          </List>
        </PullRefresh>
      </Tab>
      <Tab :title="tabTitle.booking">
        <PullRefresh v-model="loading" @refresh="onRefresh">
          <List
            :finished="none"
            finished-text="-- 已经到底了 --"
            v-model="loading"
            @load="loadMore"
            class="list"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
          >
            <Panel
              v-for="item in orderList"
              :key="item.No"
              class="item"
            >
              <div slot="header" class="item-header">
                <img :src="item.StoreIcon" alt="">
                <p class="shop-name" @click="goStore(item.StoreId)">{{item.StoreName}} ></p>
                <p class="status">{{converStatus(item.Status)}}</p>
              </div>
              <div class="item-content" @click="goOrderDetail(item.No)">
                <p class="name">{{item.Goods}}</p>
                <p class="price">¥{{item.Amount}}</p>
              </div>
              <div slot="footer" class="item-footer">
                <p>{{item.Shipment}}</p>
                <p class="date">预售发货日期：{{item.DeliveryDate}}</p>
              </div>
            </Panel>
          </List>
        </PullRefresh>
      </Tab>
    </Tabs>
  </div>
</template>
<script>
import { Tab, Tabs, Panel, List, PullRefresh } from 'vant';
export default {
  components: {
    Tab,
    Tabs,
    Panel,
    List,
    PullRefresh
  },
  data() {
    return {
      tabIndex: 0,
      loading: false,
      none: false,
      pagin: {
        page: 0,
        pagesize: 10
      },
      orderList: [],
      error: false,
      tabTitle: {
        normal: '我的订单',
        booking: '预售订单'
      }
    }
  },
  methods: {
    onChange(index) {
      this.orderList = [];
      this.pagin.page = 0;
      this.none = false;
      this.loading = false;
      this.error = false;
      setTimeout(() => {
        if (!this.loading && this.orderList.length === 0 && !this.none) {
          this.getData();
        }
      }, 500);
      // this.getData();
    },
    loadMore() {
      this.getData();
    },
    onRefresh() {
      this.pagin.page = 0;
      this.none = false;
      this.orderList = [];
      this.getData();
      this.getNeedPayCount();
    },
    goStore(id) {
      const path = this.$route.path;
      this.$router.push(`/shop/detail/${id}?directUrl=${path}`);
    },
    goOrderDetail(no) {
      this.$router.push(`/order/detail/${no}`);
    },
    getData() {
      const isBooking = this.tabIndex === 1;
      const { pagin } = this;
      this.$http.order.list({
        isBooking,
        ...pagin
      }).then(({ result }) => {
        this.loading = false;
        if (result.length < pagin.pagesize) {
          this.none = true;
        } else {
          this.pagin.page += 1;
        }
        const list = result.map(item => {
          if (item.DeliveryDate) {
            item.DeliveryDate = item.DeliveryDate.substring(0, 10);
          }
          return item;
        })
        this.orderList = this.orderList.concat(list);
      }).catch(() => {
        this.loading = false;
        this.error = true;
      })
    },
    getNeedPayCount() {
      this.$http.order.count().then(({ result }) => {
        if (result.Normal) {
          this.tabTitle.normal = `我的订单 ${result.Normal}`;
        }
        if (result.Booking) {
          this.tabTitle.booking = `预售订单 ${result.Booking}`;
        }
      })
    },
    converStatus(status) {
      return status === 'O' ? '待付款' :
            status === 'P' ? '待接单' :
            status === 'D' ? '配送中' :
            status === 'F' ? '已完成' :
            status === 'C' ? '已取消' : '';
    },
  },
  mounted() {
    setTimeout(() => {
      this.getNeedPayCount()
    }, 500);
  }
}
</script>
<style lang="less" scoped>
.order-index-container{
  header{
    height: 46PX;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17PX;
    background-color: @maincolor;
    color: #fff;
  }
  .list{
    .item{
      margin-bottom: 20px;
      .item-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10PX 15PX;
        .border-bottom(#dedede);
        img{
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
        .shop-name{
          width: 500px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .status{
          text-align: right;
        }
      }
      .item-content{
        line-height: 40px;
        padding: 30px 15PX;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .item-footer{
        font-size: 24px;
        color: #999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .date{
          color: #333;
        }
      }
    }
  }
}
</style>
